<template>
  <div
    v-if="loaded"
    class="app-container"
  >
    <div class="d-flex align-items-center gutter-b">
      <div class="p-5">
        <em-progress
          :percentage="percentage"
          size="120px"
          layer-color="#f7f8f9"
          :speed="100"
          type="dashboard"
          :format="formatText"
        >
          <template slot="footer">
            <div class="text-warning">中危</div>
          </template>
        </em-progress>
        <h6 class="font-size-sm text-center text-muted m-0">账号安全级别</h6>
      </div>
      <div class="ml-5">
        <em-alert
          type="warning"
          title="发现 3 条风险"
          description="您的资产已经存在安全隐患，可能被病毒或者黑客入侵主机，请您尽快处理。"
          icon="shape-tools-compass"
          effect="outline"
          size="large"
          :closable="false"
        >
          <el-button size="small">立即处理</el-button>
        </em-alert>
      </div>
    </div>
    <em-cell-group
      v-if="menus.length"
      border
    >
      <em-cell
        v-for="(menu,index) in menus"
        :key="index"
        :title="menu.title"
        :label="menu.desc"
        :icon="menu.unset?'circle-warn':'success'"
        :icon-color="menu.unset?'warning':'success'"
        :center="false"
        border
      >
        <el-button
          v-if="menu.name"
          type="text"
          @click="onAction(menu)"
        >{{ menu.unset?'马上设置':'修改' }}</el-button>
      </em-cell>
    </em-cell-group>
    <!--触发的表单弹窗-->
    {{ formName }}
    <el-dialog
      v-if="dialogFormVisible"
      :visible.sync="dialogFormVisible"
      :title="dialogTitle"
      append-to-body
      destroy-on-close
      custom-class="dynamicDialogForm"
    >
      <el-scrollbar
        style="height:100%"
        wrap-style="overflow-x:hidden;"
      >
        <component
          :is="formName"
          ref="dialogForm"
          :options="formOptions"
          :action-visible="false"
          @submit="onRefresh"
        />
      </el-scrollbar>
      <template slot="footer">
        <el-button
          type="primary"
          @click="onDialogSubmit"
        >
          提交保存
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import asCamelize from '@/filters/formats/camelize'
import { mapGetters } from 'vuex'
import UpdatePasswordForm from './components/UpdatePasswordForm'
export default {
  name: 'Profile',
  components: {
    UpdatePasswordForm
  },
  data() {
    return {
      loaded: false,
      user: {},
      currentMenu: null,
      formOptions: null,
      assess: null,
      menus: [],
      dialogFormVisible: false,
      dialogTitle: '编辑用户授权策略'
    }
  },
  computed: {
    ...mapGetters(['name', 'avatar', 'roles']),
    percentage() {
      return (this.assess && this.assess.percentage) || 0
    },
    formName() {
      var name = this.currentMenu && this.currentMenu.name

      if (name) {
        return asCamelize('update_' + name + '_form')
      }
      return null
    }
  },
  created() {
    this.getUser()
  },
  methods: {
    increase() {
      this.percentage += 10
      if (this.percentage > 100) {
        this.percentage = 100
      }
    },
    formatText(percent, h) {
      return h(
        'h1',
        {
          class: 'display4'
        },
        [percent]
      )
    },
    decrease() {
      this.percentage -= 10
      if (this.percentage < 0) {
        this.percentage = 0
      }
    },
    getUser() {
      this.$http.passport.security().then(res => {
        const { items, assess } = res.data
        this.menus = items
        this.assess = assess
        this.loaded = true
      })
      //  = {
      //   name: this.name,
      //   role: this.roles.join(' | '),
      //   email: 'admin@test.com',
      //   avatar: this.avatar
      // }
    },
    onAction(menu) {
      console.log(menu)
      if (menu.emit === 'dialog') {
        this.dialogFormVisible = true
        this.dialogTitle = menu.title
        this.currentMenu = menu
      }
      this.formOptions = null
      // if (name === 'password') {
      // }
    },
    onDialogSubmit() {
      var $el = this.$refs
      if ($el.dialogForm) {
        $el.dialogForm.onSubmit()
      } else {
        console.log('refs:', $el)
      }
    },
    onRefresh() {
      this.dialogFormVisible = false
      this.getUser()
    }
  }
}
</script>
<style lang="scss" scoped>
.dynamicDialogForm {
  .el-form {
    min-height: 250px;
  }
}
</style>
